import React from 'react';
import Item from './components/Item';
import MusicHttp from '../model/MusicHttp';
import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import './index.css'
const Index = () => {
    const navigator = useNavigate()
    const [musics, setMusics] = useState({});
    const fetchData = async () => {
        var hots = await MusicHttp.getHotMusic();
        var news = await MusicHttp.getNewMusic();
        var djs = await MusicHttp.getDjMusic();
        setMusics({
            hots: {
                title: "热门音乐",
                res: hots.data.playlists.slice(0, 3)
            },
            news: {
                title: "最新音乐",
                res: news.data.albums.slice(0, 3),
              },
            djs: {
                title: "主播电台",
                res: djs.data.result.slice(0, 3),
              },
        });
    }
    useEffect(() => {
        fetchData();
    }, [])
    return (
        <div >
            <div className='all'>
                {
                    Object.keys(musics).map(item => {
                        return (
                            <div key={item}>
                                <h3>
                                    {musics[item].title}
                                <span onClick={()=>{navigator(`/more/${item}`)}}>更多</span>
                                </h3>
                                <div className="container">
                                    {musics[item].res.map(item => {
                                        return (<Item data={item} key={item.id}></Item>)
                                    })}
                                </div>
                            </div>
                        )
                    })
                }
            </div>

        </div>
    );
}

export default Index;
